<template>
  <el-container class="bg-gray h-100 w-100" v-loading="model.loading">
    <el-header class="shadow-sm d-flex justify-content-center bg-white" style="height: 80px;">
      <div class="w-100" style="line-height: 80px;">
        <h5 class="d-inline">{{title}}</h5>
        <!-- <select-ctiy-county
          class="float-right"
          v-model="area"
          default-first
          @change-area="newSearch()"
        ></select-ctiy-county> -->
        <div class="float-right">
          <el-select v-model="cityId" placeholder="请选择市" style="width: 200px;" clearable size="small" v-permission="[1]">
            <el-option v-for="(val, key) in city" :filterable="true" :key="key" :label="val" :value="key">
            </el-option>
          </el-select>
          <el-select v-model="areaId" placeholder="请选择区县" ref="area" clearable size="small" @change="newSearch()" v-permission="[1, 3]">
            <el-option v-for="(val, key) in area" :filterable="true" :key="key" :label="val" :value="key">
            </el-option>
          </el-select>
        </div>
      </div>
    </el-header>
    <el-container class="mt-2 h-100">
      <el-main class="mr-2 bg-white h-100">
        <slot></slot>
      </el-main>
      <el-aside width="410px" class="bg-white">
        <el-container>
          <el-header style="height: 55px;">
            <el-input placeholder="请输入在线举证人员姓名或账号" v-model="keywords" class="input-with-select"
              style="padding-top: 20px;">
              <el-button slot="append" icon="el-icon-search" @click="newSearch"></el-button>
            </el-input>
          </el-header>
          <el-main class="mt-3 pb-0 d-flex flex-column" :style="{height: bodyHeight + 'px'}">
            <ul class="list-group list-group-flush" style="flex: 1;overflow: auto;">
              <li v-for="(row, index) in model.rows" :key="row.id" style="cursor: pointer;" class="list-group-item"
                :class="{'list-group-item-primary': activeIndex === index}" @click="selectedUser(row, index)">
                <el-row :gutter="20" class="h-100">
                  <!-- text-success text-muted -->
                  <el-col :span="3" :class="{'text-success' : row.locus > 0, 'text-muted': row.locus === 0}" style="line-height: 52px;font-size: 25px;" v-if="selectDate">
                    <svg-icon icon-class="renyuanguiji"></svg-icon>
                  </el-col>
                  <el-col :span="20">
                    <h5 class="mb-1">{{row.name}}</h5>
                    <p class="mb-0">{{row.mobile}}</p>
                  </el-col>
                </el-row>
              </li>
            </ul>
            <div class="mt-3">
              <el-pagination class="text-center" @current-change="val => this.model.pageLoad(val)"
                :current-page.sync="model.pageIndex" :page-size="model.pageSize" layout="total, prev, pager, next"
                :total="model.count" :pager-count="5">
              </el-pagination>
            </div>
          </el-main>
        </el-container>
      </el-aside>
    </el-container>
  </el-container>
</template>
<script>
// import SelectCtiyCounty from "../common/SelectCtiyCounty";
import PagedList from "../../libs/PagedList";
import pca from '@/libs/pca-code'

export default {
  name: "signmodel",
  title: "签到模板",
  // components: { SelectCtiyCounty },
  data() {
    return {
      model: new PagedList("survey/user/selectOnlineJZOrHCAPPUserList", 20, { type: 1 }),
      // area: [],
      cityId: '',
      areaId: '',
      keywords: "",
      activeIndex: -1,
    };
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    selectDate: {
      type: String
    }
  },
  mounted() {
    this.cityId = Object.keys(this.city)[0]
    this.$nextTick(() => {
      this.areaId = this.$store.getters.userType === 4 ? this.$store.getters.areaId : Object.keys(this.area)[0]
      this.newSearch()
    })
  },
  methods: {
    newSearch() {
      if (!this.areaId) return
      this.activeIndex = -1
      this.model.search({
        cityName: this.city[this.cityId],
        areaName: this.area[this.areaId],
        nameOrAccount: this.keywords,
        date: this.selectDate
      })
    },
    selectedUser(user, index) {
      this.activeIndex = index
      this.$emit('selected-user', user)
    }
  },
  watch: {
    selectDate () {
      this.newSearch()
    }
  },
  computed: {
    city() {
      let type = this.$store.getters.userType
      if (type === 1) {
        return pca[610000]
      } else {
        return []
      }
      
    },
    area() {
      let type = this.$store.getters.userType
      if (type === 1) {
        this.areaId = ''
        return this.cityId ? pca[this.cityId] : {}
      } else {
        return pca[this.$store.getters.cityId]
      }
    },
    bodyHeight() {
      return document.body.clientHeight - 80 - 60 - 80 - 32;
    }
  }
};
</script>
<style>
.vuecal__flex {
  overflow: hidden;
}
.vuecal__flex[column],
.vuecal__flex[grow] {
  height: 100%;
}
.sport {
  box-shadow: none;
}
.vuecal__cell-events {
  position: absolute;
  bottom: 10px;
  background: transparent;
}
.vuecal--short-events .vuecal__event-title {
  text-align: center;
}
</style>
